import React from "react";
 import './index.css'
class Footer extends React.Component{

//全选
checkedAll=(e)=>{
this.props.handleCheck(e.target.checked)

}
//清除已完成
handleClear=()=>{

    this.props.clearContent()
}

  render(){
   const{todos}=this.props;
   const complete=todos.reduce((pre,cur)=>{
   return pre+(cur.done?1:0)
   },0)

   const sum =todos.length;
return(
 <div className="todo-footer">
 <input type='checkbox' checked={complete===sum&&sum!==0?true:false} onChange={this.checkedAll}/>
 <span><span>已完成{complete}</span>总数{sum}</span>

  <button onClick={this.handleClear}>清除已完成</button>
 </div>


)

  }


}

export default Footer;